<template>
  <div>
    <div style="display: flex;justify-content: space-between;align-items:center;padding: 10px;">
      <div style="display: flex;justify-content: space-between;">
        <van-image round width="50" height="50" :src="userInfo.user_photo" />
        <div style="display: flex;flex-direction: column;margin-left: 10px;justify-content: space-between;">
          <span>{{ userInfo?.user_name }}</span>
          <span>{{ userInfo?.mobile }}</span>
        </div>
      </div>
      <van-button @click="toPcHome" type="info" size="small" plain hairline><van-icon name="exchange"
          style="margin-right: 10px;" />切换PC端</van-button>
    </div>
    <van-grid column-num="3">
      <van-grid-item :text="item.meta.label" v-for="(item, index) in mobileList" :key="index" :to="item.path">
        <template #icon>
          <icon-svg class="icon" :name="item.icon" :size="30" />
        </template>
      </van-grid-item>

    </van-grid>

  </div>
</template>

<script>

import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["userInfo", "menuList"]),
    userAvatar() {
      return this.userInfo?.info?.user_photo;
    },
    mobileList() {
      return this.menuList.filter(item => item.isMobile)[0]?.children;
    }
  },
  data() {
    return {};

  },
  methods: {
    toPcHome() {
      this.$router.push('/')
    }
  },
};
</script>
<style scoped lang="scss">
.p5 {
  padding: 5px;
}
</style>
